import { createRouter, createWebHashHistory } from "vue-router";
const routerHistory = createWebHashHistory();

const jsonArrayRoute = [
    {
        path: '/Directive',
        component: () => import('@/views/Directive.vue')
    },
    {
        path: '/OptionAPI',
        component: () => import('@/views/API/OptionAPI.vue')
    },
    {
        path: '/WithData',
        component: () => import('@/views/Lifecycle&RelatedHooks/WithData.vue')
    },
    {
        path: '/WithRef',
        component: () => import('@/views/Lifecycle&RelatedHooks/WithRef.vue')
    },
    {
        path: '/CompositionAPI',
        component: () => import('@/views/API/CompositionAPI.vue')
    },
    {
        path: '/NextTick',
        component: () => import('@/views/API/NextTick.vue')
    },
    {
        name: 'Slot',
        path: '/Slot',
        component: () => import('@/views/Slot.vue')
    },
    {
        name: 'DynamicComponent',
        path: '/DynamicComponent',
        component: () => import('@/views/DynamicComponent.vue')
    },
    {
        name: 'KeepAlive',
        path: '/KeepAlive',
        component: () => import('@/views/API/KeepAlive.vue'),
        children: [
            {
                path: 'image',
                component: () => import('@/components/partiesView/image.vue'),
            },
            {
                path: 'TextAlbum',
                component: () => import('@/components/partiesView/TextAlbum.vue'),
            }
        ]
    },
    {
        path: '/VueRouter',
        component: () => import('@/views/VueRouter/VueRouter.vue'),
        children: [
            {
                name: 'logo',
                path: 'logo',
                component: () => import('@/components/routerParties/logo.vue'),
            },
            {
                name: 'intro',
                path: 'intro',
                component: () => import('@/components/routerParties/intro.vue'),
                meta: { isAuth: true }
            }
        ]
    },
    {
        path: '/WatchComputed',
        component: () => import('@/views/WatchComputed.vue'),
    },
    {
        path: '/ElementPlus',
        component: () => import('@/views/ElementPlus.vue'),
    },
    {
        path: '/GlobalProperties',
        component: () => import('@/views/GlobalProperties.vue'),
    },
    {
        path: '/DefineProps',
        component: () => import('@/views/componentComm/DefineProps.vue'),
    },
    {
        path: '/DefineEmits',
        component: () => import('@/views/componentComm/DefineEmits.vue'),
    },
    {
        path: '/CommFunc',
        component: () => import('@/views/componentComm/CommFunc.vue'),
    },
    {
        path: '/Pinia',
        component: () => import('@/views/componentComm/Pinia.vue'),
    },
    {
        path: '/Promise',
        component: () => import('@/views/Promise.vue'),
    },
    {
        path: '/PromiseGrammar',
        component: () => import('@/views/PromiseGrammar.vue'),
    },
    {
        path: '/Axios',
        component: () => import('@/views/RequireInterface/Axios.vue'),
    },
    {
        path: '/AxiosPostpackaging',
        component: () => import('@/views/RequireInterface/AxiosPostpackaging.vue'),
    },
    {
        path: '/DebounceAndThrottle',
        component: () => import('@/views/DebounceAndThrottle.vue'),
    }
]

const router = createRouter({
    history: routerHistory,
    routes: jsonArrayRoute,
})
// 全局路由也可以写在main.js里
router.beforeEach((to, from, next) => {
    if (to.meta.isAuth) {
        if (confirm('是否进入' + to.name)) {
            next();
        } else {
            alert('已取消访问')
        }
    } else {
        next();
    }
})
router.afterEach((to, from) => {

})
export { router }